<!DOCTYPE html>
<html lang="en">
<!--头部信息-->
<head>
    <meta charset="utf-8">
    <title>欢迎页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../common/css/welcome.css">

    <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
</head>
<!--欢迎页-->
<body>

<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>生薄人数</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="lifeNum"></h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>死薄人数</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="dieNum"></h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>待分配统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="dfp"></h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>待审判统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="dsp"></h1>
                                                        <small>当前分类总记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10 layuimini-qiuck">
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="/order-unassigned"
                                               data-title="待分配" data-icon="layui-icon layui-icon-survey">
                                                <i class="layui-icon layui-icon-survey"></i>
                                                <cite>待分配</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="/untrial"
                                               data-title="待审判" data-icon="layui-icon layui-icon-dialogue">
                                                <i class="layui-icon layui-icon-dialogue"></i>
                                                <cite>待审判</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="/mengpo"
                                               data-title="孟婆管理" data-icon="layui-icon layui-icon-star-fill">
                                                <i class="layui-icon layui-icon-star-fill"></i>
                                                <cite>孟婆管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="/record"
                                               data-title="瘟疫管理" data-icon="fa fa-sellsy">
                                                <i class="fa fa-sellsy"></i>
                                                <cite>瘟疫管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="/livebook"
                                               data-title="生薄管理" data-icon="fa fa-address-book-o">
                                                <i class="fa fa-address-book-o"></i>
                                                <cite>生薄管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="/diebook"
                                               data-title="死薄管理" data-icon="fa fa-address-book">
                                                <i class="fa fa-address-book"></i>
                                                <cite>死薄管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="/penalty"
                                               data-title="受刑现场" data-icon="layui-icon layui-icon-fire">
                                                <i class="layui-icon layui-icon-fire"></i>
                                                <cite>受刑现场</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="/log"
                                               data-title="日志管理" data-icon="layui-icon layui-icon-form">
                                                <i class="layui-icon layui-icon-form"></i>
                                                <cite>日志管理</cite>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body">
                                <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统日志</div>
                    <div class="layui-card-body layui-text">
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">实现审判功能</div>
                            <div class="layuimini-notice-extra">2020-06-16 22:45</div>
                            <div class="layuimini-notice-content layui-hide">
                                工作概述：<br>
                                将待确认，待审判，已审判，审判结果界面实现，对其的ajax请求进行优化和完善，对数据库表从新分析。<br>
                                存在问题：<br>
                                在数据库中的数据与页面的数据不对应，并且有些字段完全不存在，在进行ajax请求时，无法完成请求。<br>
                                个人总结：<br>
                                layui框架继续学习中，对更多的组件了解更为深刻，在界面规划上还需加强，对样式表的使用不够熟练。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">前世今生弹出层功能实现</div>
                            <div class="layuimini-notice-extra">2020-06-18 15:57</div>
                            <div class="layuimini-notice-content layui-hide">
                                工作概述：<br>
                                编辑查询所有用户的界面布局，新增详情按钮，弹窗查看功能正在完善，查看前世今生信息。<br>
                                存在问题：<br>
                                通过ajax返回数据时，只能进去error函数，而success回调函数进不去，在查阅资料资料后发现需要将datatype原来的json改为text即可正常传值。<br>
                                个人总结：<br>
                                对于前端还有很多需要学习的，包括对JavaScript、ajax的应用。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">完成瘟疫散布和记录查看功能</div>
                            <div class="layuimini-notice-extra">2020-06-23 21:08</div>
                            <div class="layuimini-notice-content layui-hide">
                                工作概述：<br>
                                实现瘟疫管理控制功能，对相关界面布局进行设置。使用layui框架设置下拉列表框的动态返回值。<br>
                                存在问题：<br>
                                在使用layui动态填充下拉列表框数值时，由于拿到的下拉列表框的值有误，导致程序空指针异常，在对相关方法进行改善之后，以解决该问题并且能正常使用。<br>
                                个人总结：<br>
                                编写程序过程中语法不够严谨，编码方式需要注意，避免再出现类似问题。对框架使用还需要加强。<br>

                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">框架实现数据交互</div>
                            <div class="layuimini-notice-extra">2020-06-26 11:02</div>
                            <div class="layuimini-notice-content layui-hide">
                                工作概述：<br>
                                实现瘟疫管理功能，其中包括散布瘟疫，瘟疫记录，瘟疫死亡名单管理等相关功能，规划权限管理以及系统设置界面，将对相关的系统级数据进行增删改查。<br>
                                存在问题：<br>
                                实现瘟疫散布功能时，向表中进行批量更新数据的时候会出现数据乱码。<br>
                                个人总结：<br>
                                框架运用熟悉，前端jquery事件编写完成等等。<br>

                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修复表格数据无法展示</div>
                            <div class="layuimini-notice-extra">2020-06-27 22:55</div>
                            <div class="layuimini-notice-content layui-hide">
                                工作概述：<br>
                                实现瘟疫管理控制功能，对相关界面布局进行设置。使用layui框架设置下拉列表框的动态返回值。<br>
                                存在问题：<br>
                                在使用layui动态填充下拉列表框数值时，由于拿到的下拉列表框的值有误，导致程序空指针异常，在对相关方法进行改善之后，以解决该问题并且能正常使用。<br>
                                个人总结：<br>
                                编写程序过程中语法不够严谨，编码方式需要注意，避免再出现类似问题。对框架使用还需要加强。<br>

                            </div>
                        </div>
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">修复弹出层页面获取父页面数据出错</div>
                            <div class="layuimini-notice-extra">2020-06-19 14:53</div>
                            <div class="layuimini-notice-content layui-hide">
                                工作概述：<br>
                                编辑查询所有用户的界面布局，新增详情按钮，弹窗查看功能正在完善，查看前世今生信息。<br>
                                存在问题：<br>
                                通过ajax返回数据时，只能进去error函数，而success回调函数进不去，在查阅资料资料后发现需要将datatype原来的json改为text即可正常传值。<br>
                                个人总结：<br>
                                对于前端还有很多需要学习的，包括对JavaScript、ajax的应用。<br>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-fire icon"></i>版本信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>系统名称</td>
                                <td>
                                    地府管理系统
                                </td>
                            </tr>
                            <tr>
                                <td>当前版本</td>
                                <td>v1.0.0</td>
                            </tr>
                            <tr>
                                <td>主要特色</td>
                                <td>界面简洁 / 响应式 / 快速 / 稳定</td>
                            </tr>
                            <tr>
                                <td>项目团队</td>
                                <td>
                                    18软件302 十组
                                </td>
                            </tr>
                            <tr>
                                <td>团队人员</td>
                                <td>
                                    何跃：后端<br>
                                    文鹏：后端<br>
                                    汪洋：前端<br>
                                    王俊伟：前端<br>
                                    胡珂瑜：前端<br>
                                </td>
                            </tr>
                            <tr>
                                <td>Gitee</td>
                                <td style="padding-bottom: 0;">
                                    <div class="layui-btn-container">
                                        <a href="https://gitee.com/hale459/DifuSystem" target="_blank"
                                           style="margin-right: 15px"><img
                                                src="https://gitee.com/zhongshaofa/layuimini/badge/star.svg?theme=dark"
                                                alt="star"></a>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-paper-plane-o icon"></i>项目简介</div>
                    <div class="layui-card-body layui-text layadmin-text">
                        <p>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本项目是面向软件技术专业的一门专业javaweb入门课程。</p>
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;涉及XML基础、Tomcat服务器、HTTP协议、Servlet、</p>
                        <p>JSP、Spring、MyBatis、SpringMVC、SpringBoot、Thymeleaf、LayUI、H5、JQuery技术等内容</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['layer', 'miniTab', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;


        Initialization();

        function Initialization() {
            $.ajax({
                type: 'GET',
                url: '/Initialization',
                error: function () {
                    layer.alert("系统错误！");
                },
                success: function (result) {
                    $("#lifeNum").text(result['lifeCount']);
                    $("#dieNum").text(result['dieCount']);
                    $("#dfp").text(result['dfpCount']);
                    $("#dsp").text(result['dspCount']);
                }
            });
        }

        miniTab.listen();

        /*系统日志*/
        $('body').on('click', '.layuimini-notice', function () {
            var title = $(this).children('.layuimini-notice-title').text(),
                noticeTime = $(this).children('.layuimini-notice-extra').text(),
                content = $(this).children('.layuimini-notice-content').html();
            var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
                '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
                '<div style="font-size: 12px">' + content + '</div>\n' +
                '</div>\n';
            parent.layer.open({
                type: 1,
                title: '日志详情' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime +
                    '</span>',
                area: '300px;',
                anim: 5,
                shade: 0.8,
                id: 'layuimini-notice',
                btn: ['返回'],
                btnAlign: 'c',
                moveType: 1,
                content: html,
                success: function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                }
            });
        });

        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        var optionRecords = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        echartsRecords.setOption(optionRecords);

        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
